<template>
  <div class="app-container">
    <!--账单管理-->
    <div class="top">
      <h5 class="title">账单管理</h5>
      <div class="nav">
        <div class="nav-left">
          <span>关键字：</span>
          <el-input
            style="width: 200px;height: 36px;margin-right: 10px;"
            placeholder="诊所名称/医生名称/区域名称/销售代理商名称"
          >
          </el-input>
          <span>结算同期：</span>
          <el-input
            style="width: 200px;height: 36px;margin-right: 10px;"
            suffix-icon="el-icon-date"
          >
          </el-input>
        </div>
        <el-button type="primary" round style="width: 120px;height: 32px;">搜索</el-button>
      </div>
      <div class="nav">
        <el-input
          v-for="(item,index) in iptStyle"
          :key="index"
          style="width: 200px;height: 36px;margin-right: 10px;"
          :placeholder="item.str"
          :suffix-icon="item.icon"
        >
        </el-input>
        <el-button type="primary" round style="width: 120px;height: 32px;">导出</el-button>
      </div>
    </div>
    <div class="bottom">
      <el-table ref="table" :data="tableData" size="small" style="width: 100%;">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="blocId" width="159" label="账单编号"></el-table-column>
        <el-table-column prop="blocId" width="159" label="开票日期"></el-table-column>
        <el-table-column prop="blocId" width="159" label="机构/集团名称"></el-table-column>
        <el-table-column prop="blocId" width="159" label="所属区域"></el-table-column>
        <el-table-column prop="blocId" width="159" label="所属销售"></el-table-column>
        <el-table-column prop="blocId" width="159" label="诊所名称"></el-table-column>
        <el-table-column prop="blocId" width="159" label="开票总额"></el-table-column>
        <el-table-column prop="blocId" width="159" label="结算周期"></el-table-column>
        <el-table-column prop="blocId" width="159" label="发票类型"></el-table-column>
        <el-table-column prop="blocId" width="159" label="发票项目"></el-table-column>
        <el-table-column prop="blocId" width="159" label="公司名称"></el-table-column>
        <el-table-column prop="blocId" width="159" label="纳税人识别号"></el-table-column>
        <el-table-column prop="blocId" width="159" label="地址"></el-table-column>
        <el-table-column prop="blocId" width="159" label="电话"></el-table-column>
        <el-table-column prop="blocId" width="159" label="开户行"></el-table-column>
        <el-table-column prop="blocId" width="159" label="帐号"></el-table-column>
        <el-table-column prop="blocId" width="159" label="发票备注"></el-table-column>
        <el-table-column prop="blocId" width="159" label="邮寄接收人"></el-table-column>
        <el-table-column prop="blocId" width="159" label="邮寄电话"></el-table-column>
        <el-table-column prop="blocId" width="159" label="邮寄地址"></el-table-column>
        <el-table-column prop="blocId" width="159" label="邮箱"></el-table-column>
        <el-table-column prop="blocId" width="159" label="顺丰快递单号"></el-table-column>
        <el-table-column prop="blocId" width="159" label="发票号码"></el-table-column>
        <el-table-column prop="blocId" width="159" label="发票状态"></el-table-column>
        <el-table-column prop="blocId" width="159" label="付款状态"></el-table-column>
        <el-table-column prop="blocAdmin" width="135" label="操作">
          <!-- <template slot-scope="scope"> -->
            <el-button type="primary" style="width: 80px;height: 324px;">详情</el-button>
          <!-- </template> -->
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      iptStyle: [
        {
          str: '机构/集团',
          icon: 'el-icon-arrow-down'
        },
        {
          str: '所属区域',
          icon: 'el-icon-arrow-down'
        },
        {
          str: '所属销售',
          icon: 'el-icon-arrow-down'
        },
        {
          str: '诊所名称',
          icon: 'el-icon-arrow-down'
        },
        {
          str: '发票类型',
          icon: 'el-icon-arrow-down'
        }
      ],
      tableData: [{
        blocId: 'LM4401DL190816200101',
        blocClinicName: '北京美中宜和门诊',
        clinicNature: '民营',
        blocAdmin: '管理员',
        billAdmin: '账单管理员',
        sign: '已签',
        deadline: '2019.09.09',
        packageRules: '',
        ProductRules: ''
      }, {
        blocId: 'LM4401DL190816200101',
        blocClinicName: '北京美中宜和门诊',
        clinicNature: '民营',
        blocAdmin: '管理员',
        billAdmin: '账单管理员',
        sign: '已签',
        deadline: '2019.09.09',
        packageRules: '',
        ProductRules: ''
      }]
    };
  },
  methods: {
    blocDetail(row) {
      this.$router.push('details');
    }
  }
};
</script>

<style scoped>
    .top .title {
      margin: 0 0 20px;
      font-size: 30px;
      color: #02a7f0;
    }

    .nav {
      font-size: 14px;
      margin-top: 10px;
      display: flex;
      justify-content: space-between;
    }

    .nav-left {
      display: flex;
      align-items: center;
      color: #999;
    }

    .bottom {
      margin-top: 10px;
    }
</style>
